<!-- 首页内容部分组件 -->
<script setup lang="ts">
import {BrightnessIcon,Brightness1Icon,ChartMedianIcon,CastIcon} from 'tdesign-icons-vue-next'
import {echart1,echart2,echart3} from "@/composables/echarts";
import * as echarts from 'echarts'


interface ICard {
  title: string,
  price: number,
  icon: IconType,
  iconColor: string,
  totalTitle: string,
  total: number,
}

// 定义图标类型
type IconType = 'BrightnessIcon' | 'Brightness1Icon' | 'ChartMedianIcon' | 'CastIcon';


const cards = ref<ICard[]>([
  { title: '总人数', price: 23343, iconColor: 'text-violet-500', icon: "BrightnessIcon", total: 3892982, totalTitle: '总人数' },
  { title: '销售额', price: 18393, iconColor: 'text-green-600', icon: "Brightness1Icon", total: 9387382, totalTitle: '总销售额' },
  { title: '订单数', price: 3803, iconColor: 'text-blue-500', icon: "ChartMedianIcon", total: 83493, totalTitle: '总订单数' },
  { title: '评论数', price: 8994, iconColor: 'text-red-500', icon: "CastIcon", total: 48920, totalTitle: '总评论' },
])

// 创建一个包含所有图标组件的对象
const icons:Record<IconType, any> = {
  BrightnessIcon,
  Brightness1Icon,
  ChartMedianIcon,
  CastIcon
};

const initChart=()=>{
  const chart1Element=document.getElementById('echart1') as HTMLDivElement;
  const chart3Element=document.getElementById('echart3') as HTMLDivElement;
  const chart2Element=document.getElementById('echart2') as HTMLDivElement;

  if (chart1Element) {
    const chart1 = echarts.init(chart1Element);
    chart1.setOption(echart1);
  }

  if (chart3Element) {
    const chart3 = echarts.init(chart3Element);
    chart3.setOption(echart3);
  }

  if (chart2Element) {
    const chart2 = echarts.init(chart2Element);
    chart2.setOption(echart2);
  }
}

const handleResize = () => {
  echarts.getInstanceByDom(document.getElementById('echart1') as HTMLDivElement)?.resize();
  echarts.getInstanceByDom(document.getElementById('echart3') as HTMLDivElement)?.resize();
  echarts.getInstanceByDom(document.getElementById('echart2') as HTMLDivElement)?.resize();
};


onMounted(async () => {
  await nextTick();
  initChart()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  // Dispose of charts to avoid memory leaks
  echarts.getInstanceByDom(document.getElementById('echart1') as HTMLDivElement)?.dispose();
  echarts.getInstanceByDom(document.getElementById('echart3') as HTMLDivElement)?.dispose();
  echarts.getInstanceByDom(document.getElementById('echart2') as HTMLDivElement)?.dispose();
});
</script>

<template>
  <div class="grid md:grid-cols-4 gap-3 bg-gray-100">
    <t-card v-for="(card, index) of cards"
            :key="index"
            :title="card.title"
            shadow header-bordered class="cursor-pointer">
      <template #actions>
        <div class="flex justify-between">
          <t-tag theme="danger" size="small" variant="dark">月</t-tag>
        </div>
      </template>
      <section class="flex mt-3 justify-between items-center">
        <span class="text-3xl">${{ card.price }}</span>
        <div>
          <component :is="icons[card.icon]" :class="['text-3xl', card.iconColor]" />
        </div>
      </section>
    </t-card>
  </div>
  <div class="my-2 flex justify-between h-80">
    <div class="w-3/5 mr-2">
      <t-card title="数据统计" size="small" shadow class="cursor-pointer">
        <template #actions>
        </template>
        <div id="echart1" class="h-[260px] w-full"></div>
      </t-card>
    </div>
    <div class="w-2/5 ml-2">
      <t-card size="small" title="数据分析" shadow class="cursor-pointer">
        <template #actions></template>
        <div id="echart2" class="h-[260px] w-full"></div>
      </t-card>
    </div>
  </div>
  <div class="flex justify-between h-96">
    <div class="w-2/6 mr-2">
      <t-card size="small" title="销售数据" shadow class="cursor-pointer">
        <template #actions></template>
        <div id="echart3" class="h-80 w-full"></div>
      </t-card>
    </div>
    <div class="w-4/6 ml-2">
      <t-card size="small" title="订单管理" shadow class="cursor-pointer">
        <template #actions></template>
        <IndexTab class="h-80 w-full"/>
      </t-card>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>